<template>
  <view
    class="dataBoard"
    v-if="database.length > 0"
    :style="{
      backgroundImage: `url(${bg})`,
    }"
  >
    <u-grid :border="false">
      <u-grid-item v-for="(item, index) in database" :key="index">
        <text class="grid-text">
          <text v-if="item.isMoney">{{ item.value | formatCurrency }}</text>
          <text v-else> {{ item.value }}</text>
        </text>
        <view class="label">{{ item.label }}</view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
import { getDataBoard } from "@/service/api/sp-common/databoard";
import { mapState } from "vuex";

export default {
  name: `dataBoard`,
  created() {
    // this.fetchData();
  },
  computed: {
    ...mapState("sp-common/auth", ["token"]),
  },
  data() {
    return {
      database: [
        {
          label: "日增营收(元)",
          value: 0,
          isMoney: true,
        },
        {
          label: "日增成交数",
          value: 0,
        },
        {
          label: "日增会员",
          value: 0,
        },
      ],
      bg: "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/kd/20230403/0fb7477f-9316-4f28-ae36-1add346cd2a7_dataBoardbg.png",
    };
  },
  watch: {
    token: {
      handler(val) {
        if (val) {
          this.fetchData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    async fetchData() {
      const res = await getDataBoard();
      this.database = [
        {
          label: "日增营收(元)",
          value: res?.income,
          isMoney: true,
        },
        {
          label: "日增成交数",
          value: res?.num,
        },
        {
          label: "日增会员",
          value: res?.dayAdd,
        },
      ];
    },
  },
};
</script>

<style scoped lang="scss">
.dataBoard {
  width: 686rpx;
  height: 187rpx;
  background-color: white;
  margin: 20rpx auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
}
.grid-text {
  font-weight: 500;
  font-size: 50rpx;
  font-family: DINPro;
}
.label {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.7;
}
</style>
